﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <!-- 包含公共的JSP代码片段 -->
	
<title>餐馆王平台</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/jquery.js"></script>
<script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/page_common.js"></script>
<script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/jquery.form.js"></script>
<link href="${applicationScope.backendStyleFolder}/css/common_style_blue.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="${applicationScope.backendStyleFolder}/css/index_1.css" />
</head>
<body>

<!-- 页面标题 -->
<div id="TitleArea">
	<div id="TitleArea_Head"></div>
	<div id="TitleArea_Title">
		<div id="TitleArea_Title_Content">

					<img border="0" width="13" height="13" src="${applicationScope.backendStyleFolder}/images/title_arrow.gif"/> 添加新菜品

		</div>
    </div>
	<div id="TitleArea_End"></div>
</div>

<!-- 主内容区域（数据列表或表单显示） -->
<div id="MainArea">
	<!-- 表单内容 -->
	<form action="/food?method=save" method="post" id="uploadForm" enctype="multipart/form-data">
	<%--<form id="uploadForm">--%>
		<!-- 本段标题（分段标题） -->
		<div class="ItemBlock_Title">
        	<img width="4" height="7" border="0" src="${applicationScope.backendStyleFolder}/images/item_point.gif"> 菜品信息&nbsp;
        </div>
		<!-- 本段表单字段 -->
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
				<div class="ItemBlock2">
					<table cellpadding="0" cellspacing="0" class="mainForm">
                    <tr>
							<td width="80px">菜系</td>
							<td>
                            <select name="typeId" id="cid" style="width:80px">
	                            <c:forEach items="${sessionScope.foodTypes}" var="type">
			   						<option value="${type.typeId}"
			   							
			   						>${type.typeName}</option>
								</c:forEach>
			   					
                            </select>
                             *<input type="hidden" name="id" id="typeid" value="" /></td>
						</tr>
						<tr>
							<td width="80px">菜名</td>
							<td><input type="text" name="foodName" id="foodName" class="InputStyle"/> *<span id="msg"></span></td>
						</tr>
						<tr>
							<td>价格</td>
							<td><input type="text" name="foodPrice" class="InputStyle" value=""/> *</td>
						</tr>
                        <tr>
							<td>会员价格</td>
							<td><input type="text" name="foodVipPrice" class="InputStyle" value=""/> *</td>
						</tr>
						
						<tr>
							<td>简介</td>
							<td><textarea name="foodDesc" class="TextareaStyle"></textarea></td>
						</tr>

						<tr>
							<td width="80px">菜品图片</td>
							<td>
								<%--<form  id="form" action="/food?method=uploadImg" method="post" enctype="multipart/form-data">--%>
								<img src="" id="foodImg">
								<input type="file" name="imageUrl" id="image" onchange="changeImg()"/> *
								<%--</form>--%>
							</td>
						</tr>
					</table>
				</div>
            </div>
        </div>
		
		
		<!-- 表单操作 -->
		<div id="InputDetailBar">

					 <input type="submit" id="addBtn" value="添加" class="FunctionButtonInput">

            <a href="javascript:history.go(-1);" class="FunctionButton">返回</a>
        </div>
	</form>
</div>

<script>
	$("#foodName").change(function () {
		$.get("/food?method=nameExists",{"foodName" : $(this).val()},function (result) {
			$("#msg").text(result.message)
			if (result.success){
				$("#msg").css("color", "green");
				$("#addBtn").attr("disabled", false);
			} else {
				$("#msg").css("color", "red");
				$("#addBtn").attr("disabled", true);
			}
		},"json")
	})

/*	$("#image").change(function () {
		$.get("/food?method=uploadImg",{"imageUrl" : $(this).val()},function (result) {
			if (result.success){
				alert("图片上传成功")
				$("#foodImg").attr("src",result);
				//$("#msg").css("color", "green");
				//$("#addBtn").attr("disabled", false);
			} else {
				//$("#msg").css("color", "red");
				//$("#addBtn").attr("disabled", true);
			}
		},"String")
	})*/

	/*function changeImg() {
		console.log("开始传图片。。。");
		console.log("${pageContext.request.contextPath}/food?method=uploadImg");
		var obj = {
			url : "${pageContext.request.contextPath}/food?method=uploadImg",
			dateType : "String",
			type : "post",
			success : function (result) {
				alert("图片上传成功~");
				$("#foodImg").attr("src",result);
			}
		};
		$("#form").ajaxSubmit(obj);
	}
*/


/*		function changeImg() {
			//console.log($('#uploadForm')[0][6]);
			var formData = new FormData($('#uploadForm')[0]);
			//console.log((formData[6]));
			$.ajax({
				type: 'post',
				url: "${pageContext.request.contextPath}/food?method=uploadImg", //上传文件的请求路径必须是绝对路劲
				data: formData,
				cache: false,
				processData: false,
				contentType: false,
			}).success(function (result) {
				alert(result);
			}).error(function () {
				alert("上传失败");
			});

		}*/



</script>

</body>
</html>
